<!-- 银证转入记录 -->
<template>
	<view class="til-container">
		<mescroll-uni
			:height="`${height}rpx`"
			:down="downOption"
			:up="upOption"
			@init="mescrollInit"
			@down="downCallback"
			@up="upCallback"
		>
			<!-- 数据列表 -->
			<view v-for="(item, index) in list" :key="index" class="til-item">
				<view class="til-il">
					<view class="til-il-t">{{ item.pay_type_name }}</view>
					<view class="til-il-b" :style="{color: item.txtcolor}">
						{{ item.is_pay_name }}
					</view>
				</view>
				<view class="til-ir">
					<view class="til-ir-t" :style="{'color': item.txtcolor === 'green' ? '#F13444' : '#8F8F8F'}">
						+{{ item.money }}
					</view>
					<view class="til-ir-b">{{ item.createtime }}</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script setup>
import {ref} from 'vue';
import {onShow, onPageScroll, onReachBottom} from '@dcloudio/uni-app';
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";

const {mescrollInit, downCallback, getMescroll} = useMescroll(onPageScroll, onReachBottom);

// api
import {capitalLog} from '@/api/user.js';

// props
const props = defineProps({
	height: {
		type: String,
		default: ''
	},
	config: {
		type: Object,
		default: () => {}
	},
	index: {
		type: Number,
		default(){
			return 0
		}
	},
	tabs: { 
		type: Array,
		default(){
			return []
		}
	}
});

// defineEmits
const emits = defineEmits(['submit']);

// mescroll-body 配置（down && up）
const downOption = {
	auto: false
};
const upOption = {
	auto: false,
	empty: {
		use : true,
		icon: '/static/images/wushuju.png',
		tip: '~ 空空如也 ~'
	}
};

const getListFn = () => {
	setTimeout(function() {
		getMescroll().resetUpScroll();
	}, 0);
};

// 列表数据
const list = ref([]);
const bank_list = ref([]);

const upCallback = (mescroll) => {
	//联网加载数据  并且加载出卡的信息
	capitalLog({
		size: mescroll.size,
		page: mescroll.num,
		type: 0
	}).then(res => {
		if(mescroll.num == 1) list.value = [];
		if(res.code == 1){
			bank_list.value = res.data.bank_list;
			res.data.list.forEach(v => {
				v.createtime = formatDate('y-m-d h:i:s', v.createtime * 1000,2)
			});
			list.value = list.value.concat(res.data.list);
			mescroll.endSuccess(res.data.list.length);
		} else {
			mescroll.endErr();
		}
	});
};

const formatDate = (formatStr, fdate, type = 1, isMs = true) => {
	let date = ""
	if (type === 3) {
		date = _formatTimeStr(fdate, formatStr)
	} else {
		date = _formatDate(formatStr, fdate, type, isMs)
	}
	return date;
};

const _formatDate = (formatStr, fdate, type = 1, isMs) => {
	if (!fdate) return;
	let fTime, fStr = 'ymdhis';
	if (type === 4) {
		fTime = fdate;
	} else {
		fdate = fdate.toString()
		if (~fdate.indexOf('.')) {
			fdate = fdate.substring(0, fdate.indexOf('.'));
		}
		fdate = fdate.replace('T', ' ').replace(/\-/g, '/');
		if (!formatStr)
			formatStr = "y-m-d h:i:s";
		if (fdate) {
			if (type === 2) {
				fdate = isMs ? Number(fdate) : Number(fdate) * 1000
			}
			fTime = new Date(fdate);
		} else {
			fTime = new Date();
		}
	}
	var month = fTime.getMonth() + 1;
	var day = fTime.getDate();
	var hours = fTime.getHours();
	var minu = fTime.getMinutes();
	var second = fTime.getSeconds();
	month = month < 10 ? '0' + month : month;
	day = day < 10 ? '0' + day : day;
	hours = hours < 10 ? ('0' + hours) : hours;
	minu = minu < 10 ? '0' + minu : minu;
	second = second < 10 ? '0' + second : second;
	var formatArr = [
		fTime.getFullYear().toString(),
		month.toString(),
		day.toString(),
		hours.toString(),
		minu.toString(),
		second.toString()
	]
	for (var i = 0; i < formatArr.length; i++) {
		formatStr = formatStr.replace(fStr.charAt(i), formatArr[i]);
	}
	return formatStr;
};

defineExpose({getListFn});
</script>

<style lang='scss' scoped>
.til-container {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	
	.til-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 22rpx;
		padding-bottom: 26rpx;
		border-bottom: 1px solid #E2E2E2;
		box-sizing: border-box;
		
		.til-il {
			.til-il-t {
				margin-bottom: 8rpx;
				color: #000000;
				font-size: 30rpx;
				font-weight: 400;
				font-family: PingFangSC, PingFang SC;
			}
			
			.til-il-b {
				color: #F13444;
				font-size: 24rpx;
				font-weight: 400;
				font-family: PingFangSC, PingFang SC;
			}
		}
		
		.til-ir {
			.til-ir-t {
				margin-bottom: 8rpx;
				color: #8F8F8F;
				font-size: 30rpx;
				font-weight: 400;
				font-family: PingFangSC, PingFang SC;
				text-align: right;
			}
			
			.til-ir-b {
				color: #8F8F8F;
				font-size: 24rpx;
				font-weight: 400;
				font-family: PingFangSC, PingFang SC;
			}
		}
	}

	::v-deep(.mescroll-uni) {
		.empty-icon {
			width: 220rpx;
		}
	}
}
</style>